<template>
  <div>
    <el-row style="margin-bottom: 10px">
      <el-col :span="5">
        <el-button type="primary" size="medium">转单</el-button>
      </el-col>

      <el-col :span="9"> </el-col>

      <el-col :span="10">
        <el-input
          style="width: 240px"
          placeholder="请输入模板编号或者模板名称"
        ></el-input>
        <el-button size="medium">搜索</el-button>
        <el-button size="medium">高级检索</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        ref="multipleTable"
        :data="tableData"
        border
        stripe
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="templatenum" label="合同编号" width="100">
        </el-table-column>
        <el-table-column prop="templatename" label="模板名称" width="200">
        </el-table-column>
        <el-table-column prop="editor" label="业务流"> </el-table-column>
        <el-table-column prop="dateofapproval" label="发起人">
        </el-table-column>
        <el-table-column prop="businessnum" label="任务索引信息">
        </el-table-column>
        <el-table-column prop="version" label="发起时间"> </el-table-column>
        <el-table-column prop="status" label="当前节点"> </el-table-column>

        <el-table-column label="停留时间">
          <template #default="scope">
            <el-button size="small" @click="followUp(scope.$index, scope.row)"
              >进度查询</el-button
            >

            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >查看详细</el-button
            >
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >

            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 20, 25, 30]"
        :page-size="15"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </el-row>

    <!-- 进度查询弹出框 -->
    <el-dialog title="进度查询" v-model="followDialog" center>
      <div class="follow-info">
        <div class="follow-info_top">
          <h3>业务流名称文本</h3>
          <span>5月北京展会出差</span>
        </div>
        <div class="follow-info_bottom">
          <div>22任务节点</div>
          <div>2分支路线</div>
          <div>33执行人</div>
        </div>
      </div>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="followUpData"
        class="follow-table"
        border
        stripe
      >
        <el-table-column
          property="nodeNumber"
          label="节点编号"
        ></el-table-column>
        <el-table-column property="nodeName" label="节点名称"></el-table-column>
        <el-table-column property="nodeUser" label="节点人员"></el-table-column>
        <el-table-column
          property="submitTime"
          label="提交时间"
        ></el-table-column>
        <el-table-column
          property="nodeIdea"
          label="节点意见"
          width="250"
        ></el-table-column>
        <el-table-column property="action" label="动作"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 20, 25, 30]"
        :page-size="15"
        layout="total, sizes, prev, pager, next, jumper"
        :total="100"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      color: "#194d33",
      tableData: [
        {
          templatenum: "mb0011",
          templatename: "出彩报销单据",
          editor: "官方运营人员",
          dateofapproval: "20211023",
          businessnum: 1,
          status: "启用",
        },
        {
          templatename: "预设模板-出差报销单据",
          status: "停用",
        },
        {},
        {},
        {},
        {},
        {},
      ],
      followUpData: [
        {
          nodeNumber: "A",
          nodeName: "申请报销",
          nodeUser: "张三",
          submitTime: "2020-12-23 12:30",
          nodeIdea: "无意见",
          action: "提交",
        },
      ],
      multipleSelection: [],

      currentPage: 1,
      centerDialogVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
      },
      formLabelWidth: "80px",
      followDialog: false,
    };
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    followUp(index, row) {
      this.followDialog = true;
      console.log(index, row);
    },
    updateValue() {
      console.log(222);
    },
    input(value) {
      console.log(value);
      this.color = value;
    },
  },
};
</script>
<style lang="scss" scoped>
.follow-info {
  &_top,
  &_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.follow-table {
  margin-top: 10px;
}
</style>
